<template>
  <div class="content-div">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-tabs @change="changeTab" class="tab-box" color="#1989fa" title-active-color="#1989fa" background="unset" line-width="20px" v-model="active_tab">
        <van-tab title="全部"></van-tab>
        <van-tab title="已发起"></van-tab>
        <van-tab title="已付款"></van-tab>
        <van-tab title="已结单"></van-tab>
        <van-tab title="已取消"></van-tab>
        <van-tab title="服务中"></van-tab>
        <van-tab title="已完成"></van-tab>
        <van-tab title="已验收"></van-tab>
        <van-tab title="已评价"></van-tab>
      </van-tabs>
      <div class="list-outbox">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div>
            <div @click="toPage(item)" class="list-item-box" v-for="(item, index) in list" :key="index">
              <div class="list-head-box">
                <div class="status-box" v-if="item.state != '1' && item.state != '2'">
                  <div v-if="item.state == '5'" class="pzs-box">
                    <img :src="item.head_sculpture" alt="" srcset="">
                    <span>{{item.name}}</span>
                  </div>
                  <span style="color: #999999;">{{getCNName(item.state)}}</span>
                </div>
                <div class="status-box" style="justify-content: space-between;" v-if="item.state == '2'">
                  <span style="color: #999999;">等待陪诊师抢单</span>
                  <!-- <div class="">
                    <span>距抢单结束：</span>
                    <span style="color: #FF0000;">11时56分47秒</span>
                  </div> -->
                </div>
                <div class="status-box" style="justify-content: space-between;" v-if="item.state == '1'">
                  <span style="color: #999999;">{{getCNName(item.state)}}</span>
                  <!-- <div class="">
                    <span>距付款结束：</span>
                    <span style="color: #FF0000;">11时56分47秒</span>
                  </div> -->
                </div>
              </div>
              <div class="list-center-box">
                <div class="hospital-name">{{item.hospital_name}}</div>
                <div class="item-name">{{item.give_service_name}}</div>
                <div class="service-time">期望就诊时间：{{item.expectedTime}}</div>
              </div>
              <div class="list-bottom-box" v-if="item.state == '2'">
                <div class="qiangdan-box">
                  <img src="@/assets/images/icon-order.png" alt="" srcset="">
                  <span>已通知师傅来抢单啦~</span>
                </div>
                <div class="cancel-btn" @click.stop="cancelDrder(item)">取消订单</div>
              </div>
              <div class="list-bottom-box" v-if="item.state == '1'">
                <div>
                  <span>应付：</span>
                  <span style="color: #FF0000;">￥{{parseFloat(item.payable_amount).toFixed(2)}}</span>
                </div>
                <div class="btn-box">
                  <div class="cancel-btn"  @click.stop="cancelDrder(item)">取消订单</div>
                  <div @click.stop="payDrder(item)">去支付</div>
                </div>
              </div>
              <div class="list-bottom-box" style="justify-content: flex-end;" v-if="item.state == '7'">
                <div class="btn-box">
                  <div class="cancel-btn" @click="evaluate()">去评价</div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Toast, Dialog } from 'vant'
import { selectMemberOrderList, saveOrderGoodsNext } from '@/api/medical.js'
export default {
  name: 'index',
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      active_tab: 0,
      isLoading: false,
      params: {
        member_id: this.$store.state.user.severUserInfo.member_id,
        state: ''
      },
      day: '',
      hour: '',
      minute: 3,
      seconds: 10,
      timer: null
    }
  },
  computed: {
    member_id () {
      return this.$store.state.user.severUserInfo.member_id
    }
  },
  created () {},
  methods: {
    getCNName (value) {
      switch (value) {
        case '1':
          return '已发起'
        case '2':
          return '已付款'
        case '3':
          return '已结单'
        case '4':
          return '已取消'
        case '5':
          return '服务中'
        case '6':
          return '已完成'
        case '7':
          return '已验收'
        case '8':
          return '已评价'
        default:
          return '暂无订单状态'
      }
    },
    toPage (data) {
      this.$router.push({
        path: '/orderDetail',
        query: {
          order_goods_id: data.order_goods_id
        }
      })
    },
    onLoad (type) {
      selectMemberOrderList({ member_id: this.member_id, state: type || '' }).then(res => {
        if (res.data.errcode === 0) {
          this.list = res.data.data
          this.finished = true
          this.isLoading = false
        }
      })
    },
    changeTab (type) {
      this.clearParam(type)
    },
    clearParam (type) {
      this.list = []
      this.loading = true
      this.finished = false
      this.onLoad(type)
    },
    onRefresh () {
      this.clearParam()
    },
    payDrder () {
      console.log('去支付')
    },
    cancelDrder (item) { // 取消订单
      Dialog.confirm({
        title: '提示',
        message: '确定取消订单？'
      }).then(() => {
        saveOrderGoodsNext({ order_goods_id: item.order_goods_id, state: '4' }).then(res => {
          if (res.data.errcode === 0) {
            Toast.success('取消成功！')
            this.clearParam()
          }
        })
      })
    },
    evaluate () { // 去评价
    },
    getSecondsTime () {
      // 获取当前时间
      var nowTime = new Date()
      // 设置目标时间，这里假设目标时间为2023年9月25日
      var targetTime = new Date(2023, 8, 25, 14, 35, 56) // 这里假设为下单时间
      // 计算时间差（单位：毫秒）
      var timeDiff = targetTime.getTime() - nowTime.getTime()
      // 计算天数
      var dayDiff = Math.floor(timeDiff / (24 * 60 * 60 * 1000))
      // 计算小时数
      var hourDiff = Math.floor((timeDiff - dayDiff * (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))
      // 计算分钟数
      var minuteDiff = Math.floor((timeDiff - dayDiff * (24 * 60 * 60 * 1000) - hourDiff * (60 * 60 * 1000)) / (60 * 1000))
      // 计算秒数
      var secondDiff = Math.floor((timeDiff - dayDiff * (24 * 60 * 60 * 1000) - hourDiff * (60 * 60 * 1000) - minuteDiff * (60 * 1000)) / 1000)
      // var time = dayDiff + '天' + hourDiff + '小时' + minuteDiff + '分' + secondDiff + '秒'
      let timeArr = [ dayDiff, hourDiff, minuteDiff, secondDiff ]
      return timeArr
      // this.timer = setInterval(() => {
      //   if (this.minute === 0 && this.seconds === 0) {
      //     clearInterval(this.timer)
      //     return
      //   }
      //   if (this.seconds === 0) {
      //     this.minute--
      //     this.seconds = 20
      //   }
      //   if (this.seconds > 0 && this.seconds <= 20) {
      //     this.seconds--
      //   }
      // }, 1000)
    },
    setDjs () {
      this.timer = setInterval(() => {
        // console.log(this.getSecondsTime())
        this.day = this.getSecondsTime()[0]
        this.hour = this.getSecondsTime()[1]
        this.minute = this.getSecondsTime()[2]
        this.seconds = this.getSecondsTime()[3]
        // if (this.day === 0 && this.hour === 0 && this.minute === 0 && this.seconds === 0)
        if (this.day === 0 && this.hour === 0 && this.minute === 0 && this.seconds === 0) {
          clearInterval(this.timer)
          return
        }
        if (this.day === 0) {
          this.hour--
          this.minute = 60
          this.seconds = 60
        }
        if (this.hour === 0) {
          this.minute--
          this.seconds = 60
        }
        if (this.seconds === 0) {
          this.minute--
          this.seconds = 60
        }
        if (this.seconds > 0 && this.seconds <= 60) {
          this.seconds--
        }
      }, 1000)
    }
  },
  mounted () {
    console.log(this.$store)
    // this.setDjs()
  }
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    background-image: url('../../../../assets/images/bg.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    min-height: 100%;
    position: relative;
    .tab-box{
      width: 100%;
      height: 44px;
      position: fixed;
      top: 0;
      left: 0;
      background-image: url('../../../../assets/images/bg.png');
      background-repeat: no-repeat;
      background-size: 100% auto;
    }
    .list-outbox{
      margin: 14px auto 10px;
      width: 300px;
      padding-top: 44px;
      .list-item-box{
        margin-bottom: 10px;
        border-radius: 5px;
        border: 1px solid #eeeeee;
        box-sizing: border-box;
        padding: 10px;
        box-shadow: 0px 0px 10px #eeeeee;
        background-color: #FFFFFF;
        .list-head-box{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;
          padding: 4px;
          background-color: #f8f8f8;
          border-radius: 5px;
          margin-bottom: 10px;
          .status-box{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            img{
              width: 24px;
              height: 24px;
              border-radius: 50%;
              margin-right: 6px;
            }
            .pzs-box{
              display: flex;
              flex-direction: row;
              align-items: center;
            }
          }
        }
        .list-center-box{
          padding-bottom: 10px;
          .hospital-name{
            font-weight: bold;
            padding-bottom: 4px;
          }
          .item-name{
            font-size: 10px;
            padding-bottom: 4px;
          }
          .service-time{
            color: #999999;
            font-size: 10px;
          }
        }
        .list-bottom-box{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding-top: 10px;
          border-top: 1px solid #f8f8f8;
          .qiangdan-box{
            display: flex;
            flex-direction: row;
            align-items: center;
            img{
              width: 30px;
              height: 30px;
            }
            span{
              padding-left: 4px;
              color: #FF0000;
            }
          }
          .btn-box{
            display: flex;
            flex-direction: row;
            align-items: center;
            div:last-child{
              margin-left: 6px;
              color: #FFFFFF;
              height: 22px;
              background-color: #1989fa;
              padding: 0px 6px;
              line-height: 22px;
              border-radius: 4px;
              font-size: 10px;
              width: 46px;
              text-align: center;
            }
          }
          .cancel-btn{
            height: 20px;
            color: #1989fa;
            border: 1px solid #1989fa;
            padding: 0px 6px;
            line-height: 20px;
            border-radius: 4px;
            font-size: 10px;
            width: 50px;
            text-align: center;
          }
        }
      }
    }
  }
</style>
